<template>
    <div>
        <nav-bar>
            <template v-slot:left></template>
            <template v-slot:default>订单详情</template>
            <template v-slot:right></template>
        </nav-bar>
        
        <div class="page">
            <div class="up">
                <van-row>
                <van-col span="6">订单状态：<br>订单编号：<br>下单时间：</van-col>
                <van-col span="12" offset="0">{{statusString}}<br>{{detail.order_no}}<br>{{detail.created_at}}</van-col>
                </van-row>

                <van-button type="primary" size="large" v-if="detail.status == 1" @click="showPayFn">去支付</van-button>
                <van-button type="primary" size="large" color="#7232dd" v-if="detail.status == 1" @click="handleConfirmOrder">确认订单</van-button>
                <!-- 确认订单 状态为3 需要后台操作发货才出来，所以先默认写1 -->
            </div>

            <div class="mid">
                <van-row>
                <van-col span="6">商品金额：<br>配送方式：</van-col>
                <van-col span="12" offset="0">{{total}}<br>11111</van-col>
                </van-row>
            </div>

            <div class="down">
                <van-card
                v-for="item in detail.orderDetails.data" :key="item.id"
                :num="item.num"
                :price="item.price + '.00'"
                desc="描述信息"
                :title="item.goods.title"
                :thumb="item.goods.cover_url"
                />
            </div>
        </div>
           <van-popup 
            v-model:show="showPay" 
            closeable
            position="bottom" 
            :style="{ height: '35%' }" 
            >

            <van-grid :border="false" :column-num="1">
            <van-grid-item>
                支付宝支付<br>
                <van-image width="150" :src="aliyun" />
            </van-grid-item>
            </van-grid>

            </van-popup>
    </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar';
import { Toast,Dialog  } from 'vant';
import {useRouter,useRoute} from 'vue-router';
import {toRefs,reactive,onMounted,computed } from 'vue';
import {getOrderDetail,payOrder,confirmOrder} from 'network/order';


export default {
    name:"OrderDetail",
    components:{
        NavBar
    },

    setup() {
        const router = useRouter();
        const route = useRoute();
        const state = reactive({
            orderNo:'', //订单ID
            detail:{
                orderDetails:{
                    data:[]
                },
                state:0
            },
            showPay:false,
            aliyun:'',
        });

        const init = () =>{
            const {id} = route.query;
            state.orderNo = id;
            getOrderDetail(id).then(res=>{
                console.log(res);
                state.detail = res;
            })
        }

        onMounted(()=>{
            Toast.loading({message:'上拉加载中...',forbidClick:true});
            init();
            Toast.clear();
        })

        const statusString = computed(()=>{
            //订单状态: 1下单 2支付 3发货 4收货 5过期
            let status = ['','已经下单','已经支付','等待发货','确认收货','已过期'];

            return status[state.detail.status];
        })

        const total = computed(()=>{
            let sum =0;
            state.detail.orderDetails.data.forEach(item=>{
                sum += item.num * item.price;
            })
            return sum+'.00';
        })

        const showPayFn = () =>{
            state.showPay = true;

            payOrder(state.orderNo,{type:'aliyun'}).then(res=>{
                console.log(res);
                state.aliyun = res.qr_code_url;
            })

             //轮询查看 支付状态
            const timer = setInterval(()=>{
                payOrderStatus(state.orderNo).then(res=>{
                    if(res=='2'){                           //支付成功为2，因调不了沙箱支付，所以改成1
                        clearInterval(timer);
                        state.showPay = false;
                        router.push({path:'/orderdetail',query:{id:state.orderNo}})
                    }
                })
            },3000)

        }

        const handleConfirmOrder = () => {
            Dialog.confirm({
                title:'是否确认订单'
            }).then(()=>{
                confirmOrder(state.orderNo).then(res=>{
                    Toast('确认成功');
                    init();
                })
            }).catch(()=>{
                
            })
        }

        const close =()=>{
            Dialog.close()
        }


        
        return{
            ...toRefs(state),
            statusString,
            total,
            showPayFn,
            handleConfirmOrder,
            close
            
        }

    },
}
</script>

<style scoped>
.page{
    margin-top: 45px;
}
.up{
    padding: 20px;
    height: auto;
    text-align: left;
    line-height: 30px;
}
.mid{
    padding: 20px;
    height: auto;
    text-align: left;
    line-height: 30px;
    background: #f0f0f0;
}
.down{
    margin-top: 20px;
    text-align: left;

}
.van-button--primary{
    margin-top: 10px;
}
</style>